﻿@{
    ViewBag.Title = "XemChiTietSanPham";
    Layout = "~/Views/Shared/_LayoutDefault.cshtml";
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="description" content="Minimalistic Slideshow Gallery with jQuery" />
    <meta name="keywords" content="minimalistic, slideshow, jquery, gallery, thumbnails, css3" />
    <link rel="shortcut icon" href="../favicon.ico" type="image/x-icon" />
    <link rel="stylesheet" href="@Url.Content("~/Content/SlideshowPicture/css/style.css")" type="text/css" media="screen"/>    
    Project_KhuyenMaiVang.Models.TinKhuyenMai_SanPham_HinhAnhDTO ChiTietTinKhuyenMai = ViewBag.ThongTinChiTietTinKhuyenMai;
    List<Project_KhuyenMaiVang.Models.TinKhuyenMai_SanPham_HinhAnhDTO> ListKhuyenMaiHot = ViewBag.DSKhuyenMaiHot;
    var SoHinh = ChiTietTinKhuyenMai.ListHinhAnh.Count;
    List<Project_KhuyenMaiVang.Models.Comment> commentList = ViewBag.CommentList;
}

<script type="text/javascript">
    $(function () {
        /**
                * interval : time between the display of images
                * playtime : the timeout for the setInterval function
                * current  : number to control the current image
                * current_thumb : the index of the current thumbs wrapper
                * nmb_thumb_wrappers : total number	of thumbs wrappers
                * nmb_images_wrapper : the number of images inside of each wrapper
                */
        var interval = 3000;
        var playtime;
        var current = 0;
        var current_thumb = 0;
        var nmb_thumb_wrappers = $('#msg_thumbs .msg_thumb_wrapper').length;
        var nmb_images_wrapper = @SoHinh;
        /**
                * start the slideshow
                */
        play();

        /**
                * show the controls when 
                * mouseover the main container
                */
        slideshowMouseEvent();
        function slideshowMouseEvent() {
            $('#msg_slideshow').unbind('mouseenter')
                .bind('mouseenter', showControls)
                .andSelf()
                .unbind('mouseleave')
                .bind('mouseleave', hideControls);
        }

        /**
                * clicking the grid icon,
                * shows the thumbs view, pauses the slideshow, and hides the controls
                */
        $('#msg_grid').bind('click', function (e) {
            hideControls();
            $('#msg_slideshow').unbind('mouseenter').unbind('mouseleave');
            pause();
            $('#msg_thumbs').stop().animate({ 'top': '0px' }, 500);
            e.preventDefault();
        });

        /**
                * closing the thumbs view,
                * shows the controls
                */
        $('#msg_thumb_close').bind('click', function (e) {
            showControls();
            slideshowMouseEvent();
            $('#msg_thumbs').stop().animate({ 'top': '-230px' }, 500);
            e.preventDefault();
        });

        /**
                * pause or play icons
                */
        $('#msg_pause_play').bind('click', function (e) {
            var $this = $(this);
            if ($this.hasClass('msg_play'))
                play();
            else
                pause();
            e.preventDefault();
        });

        /**
                * click controls next or prev,
                * pauses the slideshow, 
                * and displays the next or prevoius image
                */
        $('#msg_next').bind('click', function (e) {
            pause();
            next();
            e.preventDefault();
        });
        $('#msg_prev').bind('click', function (e) {
            pause();
            prev();
            e.preventDefault();
        });

        /**
                * show and hide controls functions
                */
        function showControls() {
            $('#msg_controls').stop().animate({ 'right': '15px' }, 500);
        }
        function hideControls() {
            $('#msg_controls').stop().animate({ 'right': '-110px' }, 500);
        }

        /**
                * start the slideshow
                */
        function play() {
            next();
            $('#msg_pause_play').addClass('msg_pause').removeClass('msg_play');
            playtime = setInterval(next, interval)
        }

        /**
                * stops the slideshow
                */
        function pause() {
            $('#msg_pause_play').addClass('msg_play').removeClass('msg_pause');
            clearTimeout(playtime);
        }

        /**
                * show the next image
                */
        function next() {
            ++current;
            showImage('r');
        }

        /**
                * shows the previous image
                */
        function prev() {
            --current;
            showImage('l');
        }

        /**
                * shows an image
                * dir : right or left
                */
        function showImage(dir) {
            /**
                    * the thumbs wrapper being shown, is always 
                    * the one containing the current image
                    */
            alternateThumbs();

            /**
                    * the thumb that will be displayed in full mode
                    */
            var $thumb = $('#msg_thumbs .msg_thumb_wrapper:nth-child(' + current_thumb + ')')
                .find('a:nth-child(' + parseInt(current - nmb_images_wrapper * (current_thumb - 1)) + ')')
                .find('img');
            if ($thumb.length) {
                var source = $thumb.attr('alt');
                var $currentImage = $('#msg_wrapper').find('img');
                if ($currentImage.length) {
                    $currentImage.fadeOut(function () {
                        $(this).remove();
                        $('<img />').load(function () {
                            var $image = $(this);
                            resize($image);
                            $image.hide();
                            $('#msg_wrapper').empty().append($image.fadeIn());
                        }).attr('src', source);
                    });
                }
                else {
                    $('<img />').load(function () {
                        var $image = $(this);
                        resize($image);
                        $image.hide();
                        $('#msg_wrapper').empty().append($image.fadeIn());
                    }).attr('src', source);
                }

            }
            else { //this is actually not necessary since we have a circular slideshow
                if (dir == 'r')
                    --current;
                else if (dir == 'l')
                    ++current;
                alternateThumbs();
                return;
            }
        }

        /**
                * the thumbs wrapper being shown, is always 
                * the one containing the current image
                */
        function alternateThumbs() {
            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
                .hide();
            current_thumb = Math.ceil(current / nmb_images_wrapper);
            /**
                    * if we reach the end, start from the beggining
                    */
            if (current_thumb > nmb_thumb_wrappers) {
                current_thumb = 1;
                current = 1;
            }
                /**
                    * if we are at the beggining, go to the end
                    */
            else if (current_thumb == 0) {
                current_thumb = nmb_thumb_wrappers;
                current = current_thumb * nmb_images_wrapper;
            }

            $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
                .show();
        }

        /**
                * click next or previous on the thumbs wrapper
                */
        $('#msg_thumb_next').bind('click', function (e) {
            next_thumb();
            e.preventDefault();
        });
        $('#msg_thumb_prev').bind('click', function (e) {
            prev_thumb();
            e.preventDefault();
        });
        function next_thumb() {
            var $next_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(current_thumb + 1) + ')');
            if ($next_wrapper.length) {
                $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
                    .fadeOut(function () {
                        ++current_thumb;
                        $next_wrapper.fadeIn();
                    });
            }
        }
        function prev_thumb() {
            var $prev_wrapper = $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + parseInt(current_thumb - 1) + ')');
            if ($prev_wrapper.length) {
                $('#msg_thumbs').find('.msg_thumb_wrapper:nth-child(' + current_thumb + ')')
                    .fadeOut(function () {
                        --current_thumb;
                        $prev_wrapper.fadeIn();
                    });
            }
        }

        /**
                * clicking on a thumb, displays the image (alt attribute of the thumb)
                */
        $('#msg_thumbs .msg_thumb_wrapper > a').bind('click', function (e) {
            var $this = $(this);
            $('#msg_thumb_close').trigger('click');
            var idx = $this.index();
            var p_idx = $this.parent().index();
            current = parseInt(p_idx * nmb_images_wrapper + idx + 1);
            showImage();
            e.preventDefault();
        }).bind('mouseenter', function () {
            var $this = $(this);
            $this.stop().animate({ 'opacity': 1 });
        }).bind('mouseleave', function () {
            var $this = $(this);
            $this.stop().animate({ 'opacity': 0.5 });
        });

        /**
                * resize the image to fit in the container (400 x 400)
                */
        function resize($image) {
            var theImage = new Image();
            theImage.src = $image.attr("src");
            var imgwidth = theImage.width;
            var imgheight = theImage.height;

            var containerwidth = 400;
            var containerheight = 400;

            if (imgwidth > containerwidth) {
                var newwidth = containerwidth;
                var ratio = imgwidth / containerwidth;
                var newheight = imgheight / ratio;
                if (newheight > containerheight) {
                    var newnewheight = containerheight;
                    var newratio = newheight / containerheight;
                    var newnewwidth = newwidth / newratio;
                    theImage.width = newnewwidth;
                    theImage.height = newnewheight;
                }
                else {
                    theImage.width = newwidth;
                    theImage.height = newheight;
                }
            }
            else if (imgheight > containerheight) {
                var newheight = containerheight;
                var ratio = imgheight / containerheight;
                var newwidth = imgwidth / ratio;
                if (newwidth > containerwidth) {
                    var newnewwidth = containerwidth;
                    var newratio = newwidth / containerwidth;
                    var newnewheight = newheight / newratio;
                    theImage.height = newnewheight;
                    theImage.width = newnewwidth;
                }
                else {
                    theImage.width = newwidth;
                    theImage.height = newheight;
                }
            }
            $image.css({
                'width': theImage.width,
                'height': theImage.height
            });
        }
    });
            
</script>
<script type="text/javascript" src="@Url.Content("~/Scripts/jquery-1.5.1.min.js")"></script>
<script type="text/javascript">
    $(document).ready(function () {
        $("#ThemComment").hide();
        $("#ButtonThemComment").click(function () {
            $("#ThemComment").toggle(2000);
        });

    });

</script>
<div id="ChiTietSanPham" align="center">
    <div class="TomTatXemChiTiet">
        <h2>@ChiTietTinKhuyenMai.ThongTinTomTat</h2>
    </div>
    <div class="XemChiTiet_Main01">
        <div class="GiamGia_TietKiem">
            <div class="XemTinKhuyenMai_GiaGoc">
                Giá gốc: @ChiTietTinKhuyenMai.GiaGoc<br />
                VNĐ</div>
            <div class="XemChiTiet_PhanTramGiam">
                Giảm giá<br />
                @{ var phantram = (int)((float)(@ChiTietTinKhuyenMai.GiaGoc - @ChiTietTinKhuyenMai.GiaKhuyenMai) / @ChiTietTinKhuyenMai.GiaGoc * 100);}@phantram%</div>
            <div class="XemChiTiet_TienKhuyenMai">
                Tiền tiết kiệm<br />
                @{ var tientietkiem = (int)(@ChiTietTinKhuyenMai.GiaGoc - @ChiTietTinKhuyenMai.GiaKhuyenMai);}
                @tientietkiem VNĐ</div>
        </div>
        <div class="XemChiTiet_ButtonXem">
            <div class="ButtonXem">@Html.ActionLink(" ", "ThongTinGiaoHang", new { MaTinKhuyenMai = @ChiTietTinKhuyenMai.MaTinKhuyenMai })</div>
            <div class="GiaBan style8">
                <span class="style7">@ChiTietTinKhuyenMai.GiaKhuyenMai</span><br />
                <span class="style7">VNĐ</span></div>
        </div>
        <div class="XemChiTiet_SoNguoiDaMua">
            Số người đã mua<br />
            <strong>@ChiTietTinKhuyenMai.SoLuongMua</strong></div>
        <div class="XemChiTiet_ThoiGianConLai">
            <div class="HinhAnh">
                <img src="@Url.Content("~/Content/Images/Hourglass.gif")" width="82" height="108" /></div>
            <div class="XemChiTiet_Time">
                <p style="size: 35px; color: red; font-weight: bold">
                    Còn lại</p>
                <div id="clock1" align="left">
                </div>
            </div>
        </div>
    </div>
    <div class="XemChiTiet_Main02">
        <div class="XemChiTiet_SlideImage">
            <div id="msg_slideshow" class="msg_slideshow">
                <div id="msg_wrapper" class="msg_wrapper">
                </div>
                <div id="msg_controls" class="msg_controls">
                    <!-- right has to animate to 15px, default -110px -->
                    <a href="#" id="msg_grid" class="msg_grid"></a><a href="#" id="msg_prev" class="msg_prev">
                    </a><a href="#" id="msg_pause_play" class="msg_pause"></a>
                    <!-- has to change to msg_play if paused-->
                    <a href="#" id="msg_next" class="msg_next"></a>
                </div>
                <div id="msg_thumbs" class="msg_thumbs">
                    <!-- top has to animate to 0px, default -230px -->
                    <div class="msg_thumb_wrapper">
                        @foreach (var HinhAnh in @ChiTietTinKhuyenMai.ListHinhAnh)
                        {
                            <a href="#">
                                <img src="@Url.Content("~/Content/Uploads/" + HinhAnh.TenHinhAnh)" alt="@Url.Content("~/Content/Uploads/" + HinhAnh.TenHinhAnh)"/></a>    
                        }
                    </div>
                </div>
                <a href="#" id="msg_thumb_next" class="msg_thumb_next"></a><a href="#" id="msg_thumb_prev"
                    class="msg_thumb_prev"></a><a href="#" id="msg_thumb_close" class="msg_thumb_close">
                    </a><span class="msg_loading"></span>
                <!-- show when next thumb wrapper loading -->
            </div>
        </div>
        <div class="XemChiTiet_DiemNoiBat">
            <table width="100%" height="63" border="0">
                <tr>
                    <td height="21" align="left">
                        <span style="color: #0099FF; font-weight: bold; font-size: 20px">Điểm nổi bật:</span>
                    </td>
                </tr>
                <tr>
                    <td height="30" valign="top">@Html.Raw(@ChiTietTinKhuyenMai.DiemNoiBat)
                    </td>
                </tr>
            </table>
        </div>
        <div class="XemChiTiet_DieuKienSuDung">
            <table width="100%" height="200" border="0">
                <tr>
                    <td height="21" align="left">
                        <span style="color: #0099FF; font-weight: bold; font-size: 20px">Điều kiện sử dụng:</span>
                    </td>
                </tr>
                <tr>
                    <td height="173" valign="top">@Html.Raw(@ChiTietTinKhuyenMai.DieuKienSuDung)
                    </td>
                </tr>
            </table>
        </div>
        <div class="XemChiTiet_ThongTinChiTiet">
            <table width="100%" height="99" border="0">
                <tr>
                    <td height="21" align="center">
                        <span style="color: #0099FF; font-weight: bold; font-size: 20px">Thông tin chi tiết:</span>
                    </td>
                </tr>
                <tr>
                    <td valign="top">@Html.Raw(@ChiTietTinKhuyenMai.MoTaChiTiet)
                    </td>
                </tr>
            </table>
        </div>
    </div>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;</p>
    <p>
        &nbsp;</p>
</div>
<div class="ListSanPhamCungLoai">
    <div class="ListKhuyenMaiHot_TieuDe">
        <div align="center">
            <strong>Khuyễn mãi <span class="style11">HOT</span></strong></div>
    </div>
    <div class="HinhHotDeal">
        <img src="@Url.Content("~/Content/Images/hotdeal.png")" width="103" height="40" /></div>
    <p>
        &nbsp;</p>
    <div class="ListTinKhuyenMaiHot">
        @foreach (var Item in ListKhuyenMaiHot)
        {
            String tenhinh;

            if (Item.ListHinhAnh.Count > 0)
            {
                tenhinh = Item.ListHinhAnh[0].TenHinhAnh;
            }
            else
            {
                tenhinh = "cafe.jpg";
            }
            var PTGiamGia = (int)((float)(Item.GiaGoc - Item.GiaKhuyenMai) / Item.GiaGoc * 100);
            <div class="MauTinKhuyenMaiHot">
                <div class="MauTinKhuyenMai_TieuDe">@Html.ActionLink(Item.TenSanPham, "XemChiTietSanPham", new { idSanPham = Item.MaTinKhuyenMai })</div>
                <div class="MauTinKhuyenMai_HinhAnh">
                    <img src="@Url.Content("~/Content/Images/" + tenhinh)" width="227" height="130" /></div>
                <div class="MauTinKhuyenMai_PhanTram">
                    <p align="center">
                        <br />
                        Giảm<br />
                        @PTGiamGia%
                    </p>
                </div>
                <div class="MauTinKhuyenMai_GiaBan">
                    <div class="MauTinKhuyenMai_Gia">@Item.GiaKhuyenMai<br />
                        VNĐ</div>
                </div>
            </div>  
        }
    </div>
</div>
<div id="CommentSanPham">
    <p class="TieuDeTheTable">
        THẢO LUẬN DEAL</p>
    <p>
        &nbsp;</p>
    <div id="CommentList">
    @Html.Partial("_CommentView", commentList)
    </div>
    @if (ViewBag.Role != null)
    {
            <div style="clear: both; margin-bottom: 50px">
        <img id="ButtonThemComment" align="right" src="@Url.Content("~/Content/Images/Comment.png")" /></div>
    }

    <div id="ThemComment">
        @using (Ajax.BeginForm("AddComment", "Home", new AjaxOptions
        {
            HttpMethod = "GET",
            InsertionMode = InsertionMode.Replace,
            UpdateTargetId = "CommentList"
        }, new { chiTietTinKM = ChiTietTinKhuyenMai }))
        {
            <table width="70%" border="0px">
                <tr>
                    <td width="68">
                        <b>Nội dung:</b>
                    </td>
                    <td width="620">
                        <label>
                            <input type="hidden" name="MaTinKM"  value = "@ChiTietTinKhuyenMai.MaTinKhuyenMai" />
                            <input type="hidden" name="NgayDang"  value = "@DateTime.Now" />
                            <textarea name="CommentContent" id="textarea" cols="50" rows="7"></textarea>
                        </label>
                    </td>
                </tr>
                <tr>
                    <td>
                        &nbsp;
                    </td>
                    <td>
                        <label>
                            <input type="submit" name="button" id="button" value="Xác nhận" />
                        </label>
                    </td>
                </tr>
            </table>
        }
    </div>
</div>
<div class="clearboth">
</div>
<script language="JavaScript">

    StartCountDown("clock1", "@ChiTietTinKhuyenMai.NgayKetThuc.Month.ToString()/@ChiTietTinKhuyenMai.NgayKetThuc.Day.ToString()/@ChiTietTinKhuyenMai.NgayKetThuc.Year.ToString() 0:00 PM -0400")

    function StartCountDown(myDiv, myTargetDate) {
        var dthen = new Date(myTargetDate);
        var dnow = new Date();
        ddiff = new Date(dthen - dnow);
        gsecs = Math.floor(ddiff.valueOf() / 1000);
        CountBack(myDiv, gsecs);
    }

    function Calcage(secs, num1, num2) {
        s = ((Math.floor(secs / num1)) % num2).toString();
        if (s.length < 2) {
            s = "0" + s;
        }
        return (s);
    }

    function CountBack(myDiv, secs) {
        var DisplayStr;
        var DisplayFormat = "<b>%%D%% Ngày</br>%%H%% Giờ </br>%%M%% Phút</br>%%S%% Giây</b>";
        DisplayStr = DisplayFormat.replace(/%%D%%/g, Calcage(secs, 86400, 100000));
        DisplayStr = DisplayStr.replace(/%%H%%/g, Calcage(secs, 3600, 24));
        DisplayStr = DisplayStr.replace(/%%M%%/g, Calcage(secs, 60, 60));
        DisplayStr = DisplayStr.replace(/%%S%%/g, Calcage(secs, 1, 60));
        if (secs > 0) {
            document.getElementById(myDiv).innerHTML = DisplayStr;
            setTimeout("CountBack('" + myDiv + "'," + (secs - 1) + ");", 990);
        }
        else {
            document.getElementById(myDiv).innerHTML = "Auction Over";
        }
    }

</script>
